<!-- table 列表 -->
<!-- 导航 -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
*{margin: 0px; padding: 0px;}
.table_wrap{width: 1000px; margin: 100px auto;}
.table-striped{border: 1px solid #ccc; border-collapse:collapse; width: 100%;}
th,td{padding: 5px;border: 1px solid #ccc;  }

</style>
</head>
<body>


<script src="js/jQuery.js"></script>
<script type="text/javascript" src="js/handlebars-v3.0.3.js"></script>
<script src="js/mock.js"></script>
<script type="text/javascript" src="js/data.js"></script>

<div class="table_wrap">
	<h3>后台数据暂时表格</h3>
	<table class="table table-striped">
	    <thead>
	        <tr>
	            <th>id</th>
	            <th>用户名</th>
	            <th>性别</th>
	            <th>邮箱</th>
	            <th>手机号码</th>
	            <th>注册时间</th>
	            <th>状态</th>
	        </tr>
	    </thead>
	    <tbody id="tbody">
	    </tbody>
	</table>

</div>

<script type="text/javascript">
// 根据参入参数显示对应的值
Handlebars.registerHelper('statusFn', function(status) {
	if(status){
		return "启用"
	}else{
		return "未启用"
	}
	
});
</script>

<!-- 渲染模板 -->
<script id="template" type="text/x-handlebars-template">
	{{#each this}}
		<tr>
        <td>{{@index}}</td>
        <td>{{userName}}</td>
        <td>{{sex}}</td>
        <td>{{email}}</td>
        <td>{{phone}}</td>
        <td>{{time}}</td>
        <td>{{statusFn status}}</td>
    </tr>
	{{/each}}
</script>

<script type="text/javascript">
var source   = $("#template").html();//获取模板
var template = Handlebars.compile(source);//预编译模板

$.ajax({
    url: 'http://tableList.cn',
    dataType:'json',
    success:function(data){
    	$("#tbody").html(template(data.data));
    }
    
})

</script>
</body>
</html>